<template>
  <div class="auth-container">
    <!-- 背景装饰元素 -->
    <div class="background-decoration"></div>

    <!-- 主卡片容器 -->
    <div class="auth-card">
      <!-- 标题 -->
      <div class="auth-header">
        <h1 class="auth-title">欢迎回来</h1>
        <p class="auth-subtitle">请登录您的账号</p>
      </div>

      <!-- 表单 -->
      <form @submit.prevent="handleSubmit" class="auth-form">
        <!-- 通用字段 - 手机号 -->
        <div class="form-group">
          <label for="phone" class="form-label">手机号</label>
          <input
              type="tel"
              id="phone"
              v-model="formData.phone"
              class="form-input"
              placeholder="请输入手机号"
              required
          >
          <p v-if="errors.phone" class="error-message">{{ errors.phone }}</p>
        </div>

        <!-- 通用字段 - 密码 -->
        <div class="form-group">
          <label for="password" class="form-label">密码</label>
          <input
              type="password"
              id="password"
              v-model="formData.password"
              class="form-input"
              placeholder="请输入密码"
              required
          >
          <p v-if="errors.password" class="error-message">{{ errors.password }}</p>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" class="submit-btn">登录</button>
      </form>
    </div>

    <!-- 提示弹窗组件 -->
    <div
        v-if="toast.show"
        class="toast-container"
        :class="{'toast-error': toast.type === 'error', 'toast-success': toast.type === 'success'}"
    >
      <!-- 图标区分类型 -->
      <div class="toast-icon">
        <span v-if="toast.type === 'success'">✓</span>
        <span v-else-if="toast.type === 'error'">!</span>
      </div>
      <div class="toast-content">{{ toast.message }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from "axios";
import { useRouter } from 'vue-router'
const router = useRouter()

// 状态管理 - 只保留登录相关字段
const formData = reactive({
  phone: '',       // 手机号
  password: ''     // 密码
});
const errors = reactive({});

// 弹窗状态管理
const toast = reactive({
  show: false,        // 是否显示弹窗
  message: '',        // 弹窗内容
  type: 'success',    // 弹窗类型：success/error
  duration: 3000      // 自动关闭时间（毫秒）
});

// 显示提示弹窗方法
const showToast = (message, type = 'success', duration = 3000) => {
  // 更新弹窗状态
  toast.message = message;
  toast.type = type;
  toast.show = true;
  toast.duration = duration;

  // 自动关闭弹窗
  clearTimeout(window.toastTimer); // 清除之前的定时器，避免多个弹窗叠加
  window.toastTimer = setTimeout(() => {
    toast.show = false;
  }, duration);
};

// 表单验证 - 只保留登录相关验证
const validateForm = () => {
  let isValid = true;
  const newErrors = {};

  // 手机号验证
  if (!formData.phone) {
    newErrors.phone = '请输入手机号';
    isValid = false;
  } else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    newErrors.phone = '请输入有效的手机号';
    isValid = false;
  }

  // 密码验证
  if (!formData.password) {
    newErrors.password = '请输入密码';
    isValid = false;
  } else if (formData.password.length < 6) {
    newErrors.password = '密码长度至少为6位';
    isValid = false;
  }

  // 更新错误信息
  Object.assign(errors, newErrors);
  return isValid;
};

// 处理表单提交 - 只保留登录逻辑
const handleSubmit = async () => {
  if (validateForm()) {
    try {
      // 登录请求
      console.log("登录操作");
      const response = await axios.post('/api/universal/login',{
        phone: formData.phone,
        password: formData.password
      });
      console.log(response);
      if (response.data.code === 1){
        // 登录成功 - 调用成功提示
        showToast('登录成功！即将跳转首页', 'success');
        // 跳转页面
        await router.push('/main')
      }
      else {
        // 登录失败 - 调用错误提示
        showToast('登录失败，请检查账号和密码', 'error');
      }
    } catch (error) {
      // 接口请求失败 - 调用错误提示
      const errorMsg = error.response?.data?.error || '网络异常，请稍后重试';
      showToast(errorMsg, 'error');
      console.error(error);
    }
  } else {
    // 表单验证失败 - 调用错误提示
    showToast('请完善表单信息后提交', 'error');
  }
};
</script>

<style>
/* 全局样式重置和基础设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 确保页面不会滚动 */
html, body {
  height: 100%;
  overflow: hidden;
  background-color: #f0f2f5;
}

/* 容器样式 */
.auth-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
  radial-gradient(circle at 70% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 40%);
  z-index: 1;
}

/* 卡片样式 */
.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 40px 30px;
  transition: all 0.3s ease;
}

.auth-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* 标题样式 */
.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-title {
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

/* 表单样式 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 调整表单元素之间的间距 */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.form-input {
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 错误信息 */
.error-message {
  font-size: 13px;
  color: #ef4444;
  height: 16px;
}

/* 提交按钮 */
.submit-btn {
  padding: 14px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px; /* 增加按钮与上方元素的距离 */
}

.submit-btn:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
}

.submit-btn:active {
  transform: translateY(0);
}

/* 提示弹窗样式 */
.toast-container {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999; /* 确保弹窗在最上层 */
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
}

/* 成功弹窗样式 */
.toast-success {
  background-color: #10b981; /* 绿色系 */
}

/* 错误弹窗样式 */
.toast-error {
  background-color: #ef4444; /* 红色系 */
}

/* 弹窗图标样式 */
.toast-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .auth-card {
    padding: 30px 20px;
  }

  .auth-title {
    font-size: 24px;
  }

  /* 弹窗响应式调整 */
  .toast-container {
    width: 85%;
    max-width: 300px;
    padding: 10px 16px;
    font-size: 13px;
  }
}
</style>